<template>
    <uni-popup ref="popup" type="bottom" :safe-area="false">
        <view class="popup" :class="[theme, size]">
            <view class="header">
                <view class="title">
                    {{ title }}
                </view>
                <view class="close-btn" @click="close">
                    <image class="icon" :src="`/static/popup/close_${theme}.png`" mode="scaleToFill" />
                </view>
            </view>

            <view class="body">
                <slot></slot>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { inject, ref } from 'vue'

const theme = inject('theme')

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    size: {
        type: String,
        default: 'p-12'
    }
})

const popup = ref(null)

const open = () => {
    popup.value.open()
}

const close = () => {
    popup.value.close()
}

defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped>
.popup {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border-radius: 61.07rpx 61.07rpx 0 0;

    &.p-0 {
        padding: 0;
    }

    &.p-8 {
        padding: 15.27rpx;
    }

    &.p-12 {
        padding: 22.9rpx;
    }

    .header {
        position: relative;
        display: flex;
        flex-shrink: 0;
        min-height: 0;
        justify-content: center;
        margin-bottom: 22.9rpx;

        .title {
            color: #101318;
            font-size: 38.17rpx;
            line-height: 61.07rpx;
        }

        .close-btn {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15.27rpx;

            .icon {
                width: 38.17rpx;
                height: 38.17rpx;
            }
        }
    }

    &.dark {
        background-color: #1A1A1D;

        .header {
            .title {
                color: rgba(255, 255, 255, 0.4);
            }
        }
    }
}
</style>